<style type="text/css">
    #lottery table td{
        box-sizing: border-box;
        width:50px;
        height:50px;
        text-align:center;
        vertical-align:middle;
        font-size:24px;color:#333;
        z-index:-999;
    }
    #lottery table td a{
        background-color:white;
        width:100px;
        height:100px;
        display:block;
        text-decoration:none;
        background-image:url(http://dcdev-lib.oss-cn-shenzhen.aliyuncs.com/image/03f7ee3854a7c494/20200804/6bc05a3a48647c0f.png);
        background-size: 100% 100%;
    }

    #lottery table td.active{
        border:4px solid pink;
    }
</style>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div id="lottery" style="width:40vw;margin:10px auto; ">
    <table  cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td class="lottery-unit lottery-unit-0">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.88</div></td>
                <td class="lottery-unit lottery-unit-1">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.68</div></td>
                <td class="lottery-unit lottery-unit-2">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.66</div></td>
                <td class="lottery-unit lottery-unit-3">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.98</div></td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-11">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.55</div>
                </td>
                <td colspan="2" rowspan="2">
                    <a href="#" ></a>
                </td>
                <td class="lottery-unit lottery-unit-4">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.58</div>
                </td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-10">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.01</div>
                </td>
                <td class="lottery-unit lottery-unit-5">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.58</div>
                </td>
            </tr>
            <tr>
                <td class="lottery-unit lottery-unit-9">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.01</div>
                </td>
                <td class="lottery-unit lottery-unit-8">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.58</div>
                </td>
                <td class="lottery-unit lottery-unit-7">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.38</div>
                </td>
                <td class="lottery-unit lottery-unit-6">
                    <div style="text-align: center;font-size: 10px;font-family: fantasy;">0.28</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;" id="qrcode"></div>
<script type="text/javascript">

    var lottery={

        index:-1,	//当前转动到哪个位置，起点位置

        count:0,	//总共有多少个位置

        timer:0,	//setTimeout的ID，用clearTimeout清除

        speed:20,	//初始转动速度

        times:0,	//转动次数

        cycle:50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节

        prize:-1,	//中奖位置

        init:function(id){

            if ($("#"+id).find(".lottery-unit").length>0) {

                $lottery = $("#"+id);

                $units = $lottery.find(".lottery-unit");

                this.obj = $lottery;

                this.count = $units.length;

                $lottery.find(".lottery-unit-"+this.index).addClass("active");

            };

        },

        roll:function(){

            var index = this.index;

            var count = this.count;

            var lottery = this.obj;

            $(lottery).find(".lottery-unit-"+index).removeClass("active");

            index += 1;

            if (index>count-1) {

                index = 0;

            };

            $(lottery).find(".lottery-unit-"+index).addClass("active");

            this.index=index;


            //console.log(index);

            return false;

        },

        stop:function(index){

            this.prize=index;
            //console.log(index);
            return false;

        }

    };

    function iGetInnerText(testStr) {
        var resultStr = testStr.replace(/\ +/g, ""); //去掉空格
        resultStr = resultStr.replace(/[ ]/g, "");    //去掉空格
        resultStr = resultStr.replace(/[\r\n]/g, ""); //去掉回车换行
        return resultStr;
    }
    var ua = navigator.userAgent;

    var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

    isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

    isAndroid = ua.match(/(Android)\s+([\d.]+)/),

    isMobile = isIphone || isAndroid;
    function roll(){

        lottery.times += 1;

        lottery.roll();

        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {

            clearTimeout(lottery.timer);

            lottery.prize=-1;
            //获取最终结果
            console.log(lottery.index);
            //
            console.log("金额："+iGetInnerText($(".lottery-unit-"+lottery.index).text()))
            if(isMobile){
                if (typeof WeixinJSBridge === "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', wechatJsApiConfig, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', wechatJsApiConfig);
                        document.attachEvent('onWeixinJSBridgeReady', wechatJsApiConfig);
                    }
                } else {
                    wechatJsApiConfig();
                }
            }else{
                wechatPayNative(iGetInnerText($(".lottery-unit-"+lottery.index).text()));
            }
            
            lottery.times=0;

            click=false;

        }else{

            if (lottery.times<lottery.cycle) {

                lottery.speed -= 10;

            }else if(lottery.times==lottery.cycle) {

                var index = Math.random()*(lottery.count)|0;

                lottery.prize = index;		

            }else{

                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {

                    lottery.speed += 110;

                }else{

                    lottery.speed += 20;

                }

            }

            if (lottery.speed<40) {

                lottery.speed=40;

            };

            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);

            lottery.timer = setTimeout(roll,lottery.speed);

        }

        return false;

    }



    var click=false;



    window.onload=function(){

        lottery.init('lottery');

        $("#lottery a").click(function(){

            if (click) {

                return false;

            }else{

                lottery.speed=100;

                roll();

                click=true;

                return false;

            }

        });

    };


    function wechatPayNative(price) {

        $.ajax({
            type: "post",
            url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/tencent/mp/mp_pay_native_config.php",
            data: {
                params: JSON.stringify({
                    "pid": '0000000000000000',
                    "uid": "7cfd733cfa9a5ec7",
                    "body": "赞赏作者",
                    "total_fee":  price,
                })
            },
            success: function (res) {
                var obj = JSON.parse(res);
                if (obj.res === 1) {
                    var data = obj.data;
                    jQuery('#qrcode').qrcode(data.code_url);

                    checkPayStatus(data.order_id);

                } else {
                    alert(obj.desc);
                }
            }
        });

        }

    function checkPayStatus(orderId) {
        window.time_checkPayStatus = setInterval(function () {
            $.ajax({
                type: "post",
                url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/dcdev/system/get_order_status.php",
                data: {
                    params: JSON.stringify({
                        "pid": "0000000000000000",
                        "order_id": orderId,
                        "uid": "7cfd733cfa9a5ec7"
                    })
                },
                success: function (res) {
                    var obj = JSON.parse(res);
                    if (obj.res === 1) {
                        if (obj.data.status == 1) {
                            alert('支付成功');
                            clearInterval(window.time_checkPayStatus);
                        } else {
                            console.log('订单未支付');
                        }
                    } else {
                        alert(obj.desc);
                    }
                }
            });
        }, 2000);
    }



    function wechatJsApiConfig() {
        $.ajax({
            type: "post",
            url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/tencent/mp/mp_get_pay_jsapi_config.php",
            data: {params: JSON.stringify({"pid": '0000000000000000',"uid":"7cfd733cfa9a5ec7","body":"商品描述","total_fee":"0.01"})},
            success: function (res) {
                var obj = JSON.parse(res);
                if (obj.res === 1) {
                    var data = obj.data;
                    jsApiCall(
                        data.appId,
                        data.timeStamp,
                        data.nonceStr,
                        data.package,
                        data.signType,
                        data.sign
                    );
                } else {
                    alert(obj.desc);
                }
            }
        });
    }

    function jsApiCall(appid, timeStamp, nonceStr, packageData, signType, paySign) {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": "" + appid,     //公众号名称，由商户传入
                "timeStamp": "" + timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": "" + nonceStr, //随机串
                "package": "" + packageData,
                "signType": "" + signType,         //微信签名方式：
                "paySign": "" + paySign //微信签名
            },
            // 支付后的返回在这里
            function (res) {
                alert("这里是支付状态的回调:" + res.err_code + ' ' + res.err_desc + ' ' + res.err_msg);
            }
        )
    }
</script>









